<template>
    <div>
        <!-- 导航菜单 -->
        <div>
            <el-menu :default-active="activeIndex"
                     :collapse="true"
                     mode="horizontal"
                     @select="handleSelect"
                     router
                     style="border: none;"
            >
                <el-menu-item index="/home">首页</el-menu-item>
                <el-menu-item index="/about">关于</el-menu-item>
                <el-menu-item index="/contact">联系我</el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>


    export default {
        name: "AHeader",
        created() {
            this.activeIndex = this.$route.path;
        },
        data() {
            return {
                activeIndex: this.$route.path,
            }
        },
        methods: {
            /** 路由查询 */
            handleSelect() {
                this.$route.fullPath.split("/")
            },
        }
    }
</script>

<style>
</style>